import React from 'react';
import { size } from 'lodash';
import { useParams } from 'react-router';
import SessionTrackPlayer from './SessionTrackPlayer';
import { useReplay } from '../../service';

const SessionTrack = () => {
  const { id } = useParams();
  const [, replay] = useReplay(id);
  const { events, width, height } = replay;

  if (size(events) <= 2) {
    return null;
  }

  return (
    <SessionTrackPlayer
      autoPlay
      events={events}
      width={width}
      height={height}
    />
  );
};

export default SessionTrack;
